<template>
	<div id="importantNews">
		<div class="importantNewsBox">
			<p class="newtitle mhover">要闻</p>
			<div class="importantNewsList">
				<ul class="ulList ulList_right40">
					<a class="block_a lilist" :href="Path + item.url" v-for="(item, index) in records.slice(0, 5)" target="_blank">
						<li class="flowHidden  mhover">
							<span v-if="5 > index >= 0">{{ item.title }}</span>
						</li>
					</a>
				</ul>
				<ul class="ulList ">
					<a class="block_a lilist" :href="Path + item.url" v-for="item in records.slice(5, 10)" target="_blank">
						<li class="flowHidden mhover">
							<span>{{ item.title }}</span>
						</li>
					</a>
				</ul>
				<ul class="ulList ulList_right40">
					<a class="block_a lilist" :href="Path + item.url" v-for="item in records.slice(10, 15)" target="_blank">
						<li class="flowHidden mhover">
							<span>{{ item.title }}</span>
						</li>
					</a>
				</ul>
				<ul class="ulList">
					<a class="block_a lilist" :href="Path + item.url" v-for="item in records.slice(15, 20)" target="_blank">
						<li class="flowHidden mhover">
							<span>{{ item.title }}</span>
						</li>
					</a>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			params: {
				pageSize: 20,
				pageNum: 1,
				orderBy: 3,
				//channelIdStr:7367,
				channelPaths:'news'
			},
			records: [],
			Path: getRootPath(),
		};
	},
	mounted() {
		this.hotSort();
	},
	methods: {
		hotSort() {
			contentApi.fetchContentSearchPage(this.params, res => {
				if (res.code == '00000 00000') {
					this.records = res.data.contentPage.records;
				} else {
				}
			});
		}
	}
};
</script>

<style scoped="scoped">
#importantNews {
  width: 840px;
  display: flex;
}
#importantNews .importantNewsBox {
  width: 100%;
}
#importantNews .newtitle {
  height: 24px;
  font-size: 24px;
  font-weight: 600;
  color: #333333;
  line-height: 24px;
}
#importantNews .importantNewsList {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
}
#importantNews .importantNewsList .ulList {
  width: calc(50% - 20px);
}
#importantNews .importantNewsList .ulList .lilist {
  cursor: pointer;
  margin-top: 24px;
  height: 26px;
  font-size: 18px;
  font-weight: 400;
  color: #333333;
  line-height: 26px;
}
#importantNews .importantNewsList .ulList .lilist:hover {
  color: #ff3333;
}
#importantNews .importantNewsList .ulList .lilist:first-child {
  font-weight: 600;
  margin-top: 0;
}
#importantNews .importantNewsList .ulList_right40 {
  margin-right: 40px;
}
#importantNews .importantNewsList .ulList:nth-child(n + 3) {
  margin-top: 56px;
}

</style>
